<template >
<el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
    <el-step title="建立活动"></el-step>
    <el-step title="预算分配"></el-step>
    <el-step title="关联问卷"></el-step>
    <el-step title="关联任务"></el-step> 
    </el-steps>
        <Set-Active
        v-show="showStatus[0]"
        v-model="productParam"
        :is-edit="isEdit"
        @nextStep="nextStep">
        </Set-Active>
        <Budget-Allocation
        v-show="showStatus[1]"
        v-model="productParam"
        :is-edit="isEdit"
        @nextStep="nextStep"
        @prevStep="prevStep">
        </Budget-Allocation>

        <Linked-Questions
        v-show="showStatus[2]"
        v-model="productParam"
        :is-edit="isEdit"
        @nextStep="nextStep"
        @prevStep="prevStep">
        </Linked-Questions>

        <Linked-Task
        v-show="showStatus[3]"
        v-model="productParam"
        :is-edit="isEdit"
        @prevStep="prevStep"
        @finishCommit="finishCommit">
        </Linked-Task>
    </el-card>
    <!-- <el-button style="margin-top: 12px;" @click="last">上一步</el-button>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->

</template>


<script>
import SetActive from './commponents/setActive'
import BudgetAllocation from './commponents/budgetAllocation'
import LinkedQuestions from './commponents/linkedQuestions'
import LinkedTask from './commponents/linkedTask'

const defaultProductParam = {}//用于储存表单所有变量
    export default {
        name:'creatActive',
        components:{SetActive,BudgetAllocation,LinkedQuestions,LinkedTask},
        data() {
        return {
            productParam:'',
            isEdit:'',
            active: 0,
            showStatus: [true, false, false, false]
        };
        },

    //     methods: {
    //               hideAll() {
    //     for (let i = 0; i < this.showStatus.length; i++) {
    //       this.showStatus[i] = false;
    //     }
    //   },

    //     // next() {
    //     //     if (this.active++ > 5) this.active = 0;
    //     // },
    //     // last() {
    //     //     if (this.active-- < 1) this.active = 0;
    //     // }

    //     }
            methods: {
        hideAll() {
            for (let i = 0; i < this.showStatus.length; i++) {
            this.showStatus[i] = false;
            }
        },
        prevStep() {
            if (this.active > 0 && this.active < this.showStatus.length) {
            this.active--;
            console.log(this.active,'p')
            this.hideAll();
            this.showStatus[this.active] = true;
            }
        },
        nextStep() {
            if (this.active < this.showStatus.length - 1) {
            this.active++;
            console.log(this.active,'n')
            this.hideAll();
            this.showStatus[this.active] = true;
            }
        },
        finishCommit(isEdit) {
            this.$confirm('是否要提交该任务', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            if(isEdit){
                updateProduct(this.$route.query.id,this.productParam).then(response=>{
                this.$message({
                    type: 'success',
                    message: '提交成功',
                    duration:1000
                });
                this.$router.back();
                });
            }else{
                createProduct(this.productParam).then(response=>{
                this.$message({
                    type: 'success',
                    message: '提交成功',
                    duration:1000
                });
                location.reload();
                });
            }
            })
        }
    }
    }
</script>
<style>
  /* .form-container {
    width: 800px;

  } */
.createdactivebox{
    margin-top: 80px;
}
</style>